<template>
	<view class="home">
		<view class="cu-bar bg-white search" style="padding-top: 100rpx;padding-bottom: 20rpx;">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="搜索课程" confirm-type="search" @click="gotoSearch"></input>
			</view>
		</view>
		<view class="homepage">
		<view class="banner">
			<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image  :src="item.image_url" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<h3 style="padding-left:20rpx;border-left: 6rpx solid #39B54A;margin: 40rpx 0 20rpx 0;">讲师</h3>
		<view class="teachersall" style="padding: 8px 0px 16px;">
			<view class="teachAll">
				<view class="teacherOne margin-right" v-for="item in teachersList" :key="item.id" @click="goteacherdetail(item.id)">
					<image :src="item.image_url" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;margin-top: 20rpx;"></image>
					<view class="others">
						<view class="adaq" style="display: flex;">
							<h3 style="margin-right: 30rpx;">{{item.name}}</h3>
							<text>({{item.department_name}})</text>
						</view>
						<view class="aqq margin-top">
							<text>个人简介:{{item.desc}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="publicLesson" v-if="doesLook1">
			<view class="publicTitle">
				<h3>公开课</h3>
				<view class="">
					<text class="lg text-gray cuIcon-cascades" style="padding-right: 10rpx;"></text>
					<text @click="golessonList('公开课')">查看全部</text>
				</view>
			</view>
			<view class="publicContent">
				<view class="content_one" v-for="item in publicList" :key="item.id" @click="gotovideodetail(item.id)">
					<image :src="item.image_url" mode=""></image>
					<view class="others">
						<h3>{{item.name}}</h3>
						<text style="font-size: 26rpx;">教师:{{item.teacher_name}}</text>
						<uni-rate v-model="item.grade" :readonly="true" :is-fill="false" :max="5" allow-half :size="16"/>
						<view class="content_oneBottom">
							<text style="font-size: 26rpx;margin-top: 6rpx;">{{item.add_time}}</text>
							<view class="bottom_right">
								<text class="lg text-gray cuIcon-attentionfavor">{{item.click_nums}}</text>
								<text class="lg text-gray cuIcon-appreciate">{{item.give_like_nums}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="publicLesson" v-if="doesLook2">
			<view class="publicTitle">
				<h3>我的部门</h3>
				<view class="">
					<text class="lg text-gray cuIcon-cascades" style="padding-right: 10rpx;"></text>
					<text @click="golessonList('我的部门')">查看全部</text>
				</view>
			</view>
			<view class="publicContent">
				<view class="content_one" v-for="item in departmentList" :key="item.id" @click="gotovideodetail(item.id)">
					<image :src="item.image_url" mode=""></image>
					<view class="others">
						<h3>{{item.name}}</h3>
						<text style="font-size: 26rpx;">教师:{{item.teacher_name}}</text>
						<uni-rate v-model="item.grade" :readonly="true" :is-fill="false" :max="5" allow-half :size="16"/>
						<view class="content_oneBottom">
							<text style="font-size: 26rpx;margin-top: 6rpx;">{{item.add_time}}</text>
							<view class="bottom_right">
								<text class="lg text-gray cuIcon-attentionfavor">{{item.click_nums}}</text>
								<text class="lg text-gray cuIcon-appreciate">{{item.give_like_nums}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="publicLesson" v-if="doesLook3">
			<view class="publicTitle">
				<h3>其他部门</h3>
				<view class="">
					<text class="lg text-gray cuIcon-cascades" style="padding-right: 10rpx;"></text>
					<text @click="golessonList('其他部门')">查看全部</text>
				</view>
			</view>
			<view class="publicContent">
				<view class="content_one" v-for="item in otherList" :key="item.id" @click="gotovideodetail(item.id)">
					<image :src="item.image_url" mode=""></image>
					<view class="others">
						<h3>{{item.name}}</h3>
						<text style="font-size: 26rpx;">教师:{{item.teacher_name}}</text>
						<uni-rate v-model="item.grade" :readonly="true" :is-fill="false" :max="5" allow-half :size="16"/>
						<view class="content_oneBottom">
							<text style="font-size: 26rpx;margin-top: 6rpx;">{{item.add_time}}</text>
							<view class="bottom_right">
								<text class="lg text-gray cuIcon-attentionfavor">{{item.click_nums}}</text>
								<text class="lg text-gray cuIcon-appreciate">{{item.give_like_nums}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		</view>
		<view class="b_bottom text-center padding-bottom" >
			----已经到底了-----
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:3,
				swiperList: [],
				dotStyle: false,
				publicList:[],
				departmentList:[],
				deArea:'',
				teachersList:[],
				otherList:[],
				doesLook1:true,
				doesLook2:true,
				doesLook3:true
			}
		},
		onLoad() {
			this.getBannerData()
			this.getPublicData()
			this.getDepartmentData()
			this.getDepartmenAreatData()
			this.getTeachersData()
			this.getOtherData()
		},
		onPullDownRefresh() {
			this.getPublicData()
			this.getDepartmentData()
			this.getDepartmenAreatData()
			this.getTeachersData()
		},
		methods: {
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			gotovideodetail(id){
				uni.navigateTo({
				    url: `../videodetail/videodetail?id=${id}`
				});
			},
			goteacherdetail(id){
				uni.navigateTo({
				    url: `../teacherdetail/teacherdetail?id=${id}`
				});
			},
			golessonList(department){
				uni.navigateTo({
				    url: `../lessonlist/lessonlist?department=${department}`
				});
			},
			async getBannerData(){
				let res = await this.$myRuquest({
					url:'/banners/'
				})
				this.swiperList = res.data.results
			},
			async getPublicData(){
				let res = await this.$myRuquest({
					url:'/index_public_courses/'
				})
				if(res.statusCode==401){
					uni.clearStorageSync()
					uni.showToast({
						title:'用户名信息过期请重新登录',
						icon:'loading'
					})
					uni.reLaunch({
					    url: '/pages/login/login'
					});
					return
				}
				uni.stopPullDownRefresh();
				if(res.data.results.length>6){
					this.publicList = res.data.results.slice(0,6)
					return
				}
				if (res.data.count==0) {
					this.doeslook1 = false
				}else{
					this.doeslook1 = true
				}
				this.publicList = res.data.results
			},
			async getDepartmentData(){
				let res = await this.$myRuquest({
					url:'/index_department_courses/'
				})
				uni.stopPullDownRefresh();
				if(res.data.results.length>6){
					this.departmentList = res.data.results.slice(0,6)
					return
				}
				if (res.data.count==0) {
					this.doeslook2 = false
				}else{
					this.doeslook2 = true
				}
				this.departmentList = res.data.results
			},
			async getDepartmenAreatData(){
				let res = await this.$myRuquest({
					url:'/departments/'
				})
				uni.stopPullDownRefresh();
				this.deArea = res.data[0]
			},
			async getTeachersData(){
				let res = await this.$myRuquest({
					url:'/index_teachers/'
				})
				uni.stopPullDownRefresh();
				this.teachersList = res.data.results
			},
			async getOtherData(){
				let res = await this.$myRuquest({
					url:'/index_other_courses/'
				})
				if (res.data.count==0) {
					this.doeslook3 = false
				}else{
					this.doeslook3 = true
				}
				this.otherList = res.data.results
			},
			gotoSearch(){
				uni.navigateTo({
					url:'/pages/search/search?area=homepage'
				})
			}
		}
	}
</script>

<style lang="scss">
.homepage{
	padding: 20rpx;
	margin-top: 10rpx;
	.publicLesson{
		.publicTitle{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0 30rpx 0;
			text{
				font-size: 28rpx;
				justify-content: flex-end;
			}
		}
		.publicContent{
			padding: 10rpx 10rpx;
			.content_one{
				display: flex;
				padding: 30rpx 30rpx;
				margin-bottom: 20rpx;
				background: white;
				border-radius: 20rpx;
				image{
					width: 185rpx;
					height: 132rpx;
					border-radius: 15rpx;
				}
				.others{
					width: 565rpx;
					height: 132rpx;
					padding-left: 30rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.content_oneBottom{
						display: flex;
						justify-content: space-between;
						.bottom_right{
							padding-left: 50rpx;
						}
					}
				}
			}
		}
	}
	.teachersall{
		overflow-x: scroll;
		.teachAll{
			width: 100%;
			height: 190rpx;
			display: inline;
			white-space: nowrap;
			overflow-x: scroll;
			float: left;
		}
		.teacherOne{
			padding: 20rpx;
			display: inline-block;
			background: white;
			border-radius: 20rpx;
			width: 500rpx;
			.others{
				width: 300rpx;
				float: right;
				text:{
					font-size: 30rpx;
				}
			}
			.aqq{
				overflow: hidden;
				text{
					width: 324rpx;
					height: 98rpx;
					white-space: initial;
				}
			}
		}
	}
	
}
</style>
